<template>
  <div class="all">
    <div class="app-container">
      <!-- 步骤条 -->
      <el-steps :active="activeStep" finish-status="success" align-center class="steps">
        <el-step title="申请退住" />
        <el-step title="申请审批" />
        <el-step title="解除合同" />
        <el-step title="调整账单" />
        <el-step title="账单审批" />
        <el-step title="退住审批" />
        <el-step title="费用清算" />
      </el-steps>

      <!-- 步骤内容 -->
      <div v-if="id || activeStep===0" class="step-content">
        <!-- 步骤0：CheckoutApply1 -->
        <CheckoutApply1
            v-if="activeStep === 0"
            @next="nextStep"
            :id="id"
            @update-id="updateId"
        />

        <!-- 步骤1（type=0）：ApplicationApproval2 -->
        <ApplicationApproval2
            v-if="activeStep === 1 && type===0"
            @next="nextStep"
            @prev="prevStep"
            :id="id"
        />

        <!-- 步骤1（type=1）：AVContractStep1 -->
        <AVContractStep1
            v-if="activeStep === 1 && type===1"
            @next="nextStep"
            @prev="prevStep"
            :id="id"
        />

        <!-- 步骤1（type=3）：AdjustBillStep -->
        <AdjustBillStep
            v-if="activeStep === 1 && type===3"
            @next="nextStep"
            @prev="prevStep"
            :id="id"
        />

        <!-- 步骤2（type=0）：合同 -->
        <ApplyContract
            v-if="activeStep === 2 && type===0"
            @next="nextStep"
            @prev="prevStep"
            :id="id"
        />

        <!-- 步骤2（type=2）：BillApproveStep -->
        <BillApproveStep
            v-if="activeStep === 2 && type===2"
            @next="nextStep"
            @prev="prevStep"
            :id="id"
        />

        <!-- 步骤3（type=0）： -->
        <CheckoutApproveStep
            v-if="activeStep === 3 && type===0"
            @next="nextStep"
            @prev="prevStep"
            :id="id"
        />
        <!-- 步骤4：审核账单-->
        <ClearStep
            v-if="activeStep === 4 && type===1"
            @next="nextStep"
            @prev="prevStep"
            :id="id"
        />
        <Approval
            v-if="activeStep === 4 && type===0"
            @next="nextStep"
            @prev="prevStep"
            :id="id"
        />
        <ClearStep2
            v-if="activeStep === 5 && type===1"
            @next="nextStep"
            @prev="prevStep"
            :id="id"
        />
        <!-- 步骤5：App1 -->
        <App1
            v-if="activeStep === 6 && type===0"
            @next="nextStep"
            @prev="prevStep"
            :id="id"
        />

        <!-- 步骤6（type=1）：App2 -->
        <App2
            v-if="activeStep === 7 && type===1"
            @next="nextStep"
            @prev="prevStep"
            :id="id"
        />
      </div>
    </div>
  </div>

</template>

<script setup>
import { ref } from 'vue'
import CheckoutApply1 from './steps/CheckoutApply1.vue'
import ApplicationApproval2 from './steps/ApplicationApproval2.vue'
import AVContractStep1 from './steps/AVContractStep1.vue'
import AdjustBillStep from './steps/AdjustBillStep.vue'
import BillApproveStep from './steps/BillApproveStep.vue'
import CheckoutApproveStep from './steps/CheckoutApproveStep.vue'
import ClearStep from './steps/ClearStep.vue'
import ClearStep2 from './steps/ClearStep2.vue'
import App1 from './steps/App1.vue'
import App2 from './steps/App2.vue'
import ApplyContract from "@/views/MyApply/CheckOutApply/steps/ApplyContract.vue";
import Approval from "./steps/Approval.vue";


import {useRoute} from "vue-router";
import {getCheckoutId} from "@/api/check/checkout.js";

const route = useRoute()


let id = ref(null)
let activeStep = ref(0)
let type=ref(0)

const nextStep = () => {
  if(type.value===1){
 //   activeStep.value++
    console.log("type:   哇哈哈哈哈哈哈哈哈哈哈哈哈好·1")
    type.value=3
  }else {
    if(activeStep.value===6){
      console.log("type:   哇哈哈哈哈哈哈哈哈哈哈哈哈好·1")
      activeStep.value++
      type.value=1
    }else if(activeStep.value===3){
      activeStep.value++
      type.value=0
    }
    else {
      activeStep.value++
    }
  }
}

const prevStep = () => {
  if (activeStep.value > 1) activeStep.value--
}
const updateId = (newId) => {
  id.value = newId
}
onMounted(() => {
  console.log('当前任务名称：', route.query.taskName)

  console.log('跳转后当前步骤索引：',route.query.checkoutId )
  const processInstanceId = route.query.processInstanceId
  const checkoutId = route.query.checkoutId
   if(checkoutId){
     console.log(checkoutId)

     id.value = checkoutId
     type.value=1
     activeStep.value=7
   }

  if (processInstanceId) {
    getCheckoutId(processInstanceId).then(res => {
      console.log("id:", res.data)
      id.value = res.data.checkoutId
    })
    if(route.query.taskName.includes('退住审核')){
      activeStep.value=1
      type.value=1
    }else if(route.query.taskName.includes('解除合同')){
      activeStep.value=2
      type.value=0
    }else if(route.query.taskName.includes('调整账单')){
      activeStep.value=3
      type.value=0
    }else if(route.query.taskName.includes('账单审批')){
      activeStep.value=4
      type.value=1
    }else if(route.query.taskName.includes('院长')){
      activeStep.value=5
      type.value=1
    }else if(route.query.taskName.includes('账单结算')){
      activeStep.value=6
      type.value=0
    }
  }


})
</script>

<style scoped>
.steps {
  background-color: #fafafa;
  border-left: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;

  padding: 20px 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
.all {
  background-color: #c8ebfb;
  padding: 20px;
}
.app-container {

  background-color: white;
}
.step-content {
  margin-top: 30px;
}
</style>
